<template>
  <header class="ts-header">
    <div class="ts-wrapper">
      <div v-if="back" class="ts-left" @click="goBack()">
        <svg class="ts-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16"
             height="32"
             viewBox="0 0 16 32">
          <image width="16" height="32"
                 xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAMAAAAsVwj+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA8FBMVEUAAAAjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUAAACLSBE9AAAATnRSTlMAJN/AHO4V1vpGD839VgrCZwa3fAOqjwGdoY6yf2/OYNtT5B/sKzv29TfpRd7tJjbyHULcFk7TW8lovXexhqOWlKWFdQe+C1kRTRfx2blrbb3DAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB+EIDhcYAS0WQ08AAAC/SURBVCjPVdFZO0JhFIbhT5GvbdtJm62iURJKgwZTZQhRz///OU7Xu86e++y9lnP2dlJp6d0Ue7Yz+/is6eCA8NB0lIMj0/ljKJiOT+DUdHIGxcRACcqx6XNIR6YvoBKYrkItY7oe0miaznouW6av2lx37KIb/K1MvqPbE7jv0xiIDNuMHkTGnkkgMg2ZRSKP8JQXeYaXWOQV5onIApYCyRu8i8Rl+BD5XOkbnPuaEX6L/Ezwa5HfEX8CrrnZ/gOmxhvEKwXZugAAAABJRU5ErkJggg=="></image>
        </svg>
      </div>
        <div class="ts-left"  @click="$emit('onBack')" v-if="!back&&custom">
                  <svg class="ts-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16"
             height="32"
             viewBox="0 0 16 32">
          <image width="16" height="32"
                 xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAMAAAAsVwj+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA8FBMVEUAAAAjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUjGBUAAACLSBE9AAAATnRSTlMAJN/AHO4V1vpGD839VgrCZwa3fAOqjwGdoY6yf2/OYNtT5B/sKzv29TfpRd7tJjbyHULcFk7TW8lovXexhqOWlKWFdQe+C1kRTRfx2blrbb3DAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB+EIDhcYAS0WQ08AAAC/SURBVCjPVdFZO0JhFIbhT5GvbdtJm62iURJKgwZTZQhRz///OU7Xu86e++y9lnP2dlJp6d0Ue7Yz+/is6eCA8NB0lIMj0/ljKJiOT+DUdHIGxcRACcqx6XNIR6YvoBKYrkItY7oe0miaznouW6av2lx37KIb/K1MvqPbE7jv0xiIDNuMHkTGnkkgMg2ZRSKP8JQXeYaXWOQV5onIApYCyRu8i8Rl+BD5XOkbnPuaEX6L/Ezwa5HfEX8CrrnZ/gOmxhvEKwXZugAAAABJRU5ErkJggg=="></image>
        </svg>
        </div>
      <div class="middle-title">
        <h1 class="ts-title">{{title}}</h1>
      </div>
      <div class="right-handle">
        <slot name="right"></slot>
      </div>
    </div>
  </header>
</template>

<script>
  /**
   * @desc 头部组件
   * @param [title] 头部标题
   * @param [back] 显示返回箭头
   * @param [slot="right"] 自定义头部右边
   **/
  export default {
    name: 'tsHeader',
    props: {
      title: {type: String},
      back: Boolean,
      custom:Boolean
    },
    methods: {
      goBack() {
        this.$router.goBack();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/mixin";
  @import "../../../assets/css/variables";

  .ts-header {
    position: relative;
    z-index: $headerZIndex;
    background: #ffffff;
    margin-bottom: .03rem;
    box-shadow: 0 0 0 0.03rem #f0f0f0;
    @include wh(100%, .88rem);
    .ts-wrapper {
      .ts-left {
        @include fja();
        @include wh(.66rem, .88rem);
        .ts-svg {
          @include wh(.18rem, .36rem);
        }
      }
      .middle-title {
        @include center();
        @include wot();
        .ts-title {
          @include sc(.36rem, #020202);
          font-weight: 500;
        }
      }
      .right-handle {
        @include sc(.30rem, $themeColor);
        color: #3194FB;
        right: .24rem;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        &:active {
          opacity: .6;
        }
      }
    }
  }
</style>
